<script src="https://unpkg.com/vue@2.6.12"></script>

<p>使用vue2</p>
<p>Vue2 与 Vue3 渲染函数 createElement (h) 得区别:</p>
<p>Vue2中得 h是绑定在当前实例上，也就是再new Vue()内部，保存在app上，因此要创建子节点vdom，需要一层接一层得传递h函数</p>

<div id="app">
  <div>{{ message }}</div>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: " hello createElement()"
    },
    render(h) {
      return h("div", {
        attr: {
          id: "foo"
        },
        on: {
          click: this.clickDom
        },
        text: "inner text"
      }, [
        h("span", "children-1"),
        h("div", {
          attr: {
            class: "children-2"
          }
        }, "children-2"),
        createVdom(h)
      ])
    },
    methods: {
      clickDom() {
        console.log("click dom");
      }
    },
  });

  // 
  function createVdom(h) {
    return h("div", "children-3");
  }
</script>